<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>工作务任-状态</title>

		<link rel="stylesheet" href="../lib/element-ui/index.css">
		<link rel="stylesheet" href="./index.css">

	</head>
	
	<body>

		<div id="app">
		
			<div v-if="null == listData">无定时任务</div>
			
			<el-collapse v-else class="app-collapse" v-model="style.selected" @change="onChangeItem" accordion>
			  <el-collapse-item v-for="(item, index) in listData" v-bind:key="item.jobName" :name="'collapse_item_' + index">
			    <template slot="title">
			      <span class="app-collapse-title">{{item.title}}<span>[<span>{{item.jobName}}</span>]</span></span>
			    </template>
			    <div class="app-collapse-body">
				    <div>
				    	<span>开始时间：</span><span>{{dateFormat(item.startTime)}}</span>
				    </div>
				    <div>
				    	<span>结束时间：</span><span>{{dateFormat(item.endTime)}}</span>
				    </div>
				    <div>
				    	<span>Cron 表达式：</span><span>{{item.cronExpression}}</span>
				    </div>
			    	<div>
				    	<span>状态：</span><span>{{item.jobStatus}}</span>
				    </div>
				    <div>
				    	<span>上一执行时间：</span><span>{{dateFormat(item.previousFireTime)}}</span>
				    </div>
				    <div>
				    	<span>下一次执行时间：</span><span>{{dateFormat(item.nextFireTime)}}</span>
				    </div>
				    <div>
				    	<span>最后执行时间：</span><span>{{dateFormat(item.finalFireTime)}}</span>
				    </div>
			    </div>
			    <div class="app-collapse-tools">
			       	<el-button @click="onRun(index)" type="primary" icon="el-icon-video-play" size="small" round>执行</el-button>
			       	<el-button @click="onPause(index)" type="warning" icon="el-icon-video-pause" size="small" round>暂停</el-button>
			    	<el-button @click="onResume(index)" type="primary" icon="el-icon-time" size="small" round>恢复</el-button>
			    	<el-button @click="onDelete(index)" type="danger" icon="el-icon-delete" size="small" round>删除</el-button>
			    </div>
			    <div class="app-collapse-logs">
			    	<span>日志：</span>
			    	<div v-if="null != item.logs">
			    		<div v-for="(logItem, lIndex) in item.logs" v-if="!isBlank(logItem[1])">
			    			<el-divider content-position="left">
			    				<span>运行时间：{{dateFormat(logItem[1])}}</span>
			    				<span>用时：{{logItem[2]}}ms</span>
			    			</el-divider>
			    			<p v-html="toHtml(logItem[0])"></p>
			    		</div>
			    	</div>
			    	<div v-else style="text-align: center;"><i class="el-icon-loading"></i></div>
			    </div>
			  </el-collapse-item>
			</el-collapse>
			
		</div>
	</body>

	<script type="text/javascript" src="../../lib/snail.common.js"></script>
	<script type="text/javascript" src="../lib/vue.js"></script>
	<script type="text/javascript" src="../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="./index.js"></script>

</html>
